<template>
  <div>
    <el-button-group>
      <el-button
        plain
        icon="el-icon-arrow-left"
        size="small"
        style="margin-bottom: 1rem;"
        @click="handleBack()"
      >上一级</el-button>
      <span class="table-title">
        当前查看单位：
        <CompanyFormItem :id="currentCompany" />
      </span>
    </el-button-group>
    <el-table v-loading="loading" :data="currentTableData">
      <el-table-column label="单位" prop="company" @click="handleNext">
        <template slot-scope="{row}">
          <div class="table-company" @click="handleNext(row)">
            <CompanyItem :data="row" />
          </div>
        </template>
      </el-table-column>
      <el-table-column label="支部数量" prop="finishCount" />
      <el-table-column label="完成率（含下属支部）">
        <template slot-scope="{row}">{{ row.finishCount/row.childrenTotalCount * 100 }}%</template>
      </el-table-column>
      <el-table-column label="本级支部完成情况">
        <el-table-column label="时长">
          <template slot-scope="{row}">{{ row.self[0]&&row.self[0].count }}</template>
        </el-table-column>
        <el-table-column label="次数">
          <template slot-scope="{row}">{{ row.self[0]&&row.self[0].length/3600 }}</template>
        </el-table-column>
        <el-table-column label="完成度">
          <template
            slot-scope="{row}"
          >{{ row.finish === undefined ? '' : (row.finish ? '完成' : '未完成') }}</template>
        </el-table-column>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: 'CompanyStatisticsTree',
  components: {
    CompanyItem: () => import('./CompanyItem'),
    CompanyFormItem: () => import('@/components/Company/CompanyFormItem')
  },
  props: {
    data: { type: Array, default: null }
  },
  data: () => ({
    loading: false,
    currentTableData: null,
    historyData: null,
    currentCompany: null,
    currentCompanyStack: null
  }),
  watch: {
    data: {
      handler(val) {
        this.currentTableData = val
        this.currentCompany = val[0].company
        this.historyData = []
        this.currentCompanyStack = []
      },
      immediate: true,
      deep: true
    }
  },
  methods: {
    handleBack() {
      this.currentTableData = this.historyData.pop() || this.data
      this.currentCompany =
        this.currentCompanyStack.pop() || this.data[0].company
    },
    handleNext(item) {
      this.currentCompanyStack.push(this.currentCompany)
      this.historyData.push(this.currentTableData)
      this.currentTableData = item.children
      this.currentCompany = item.company
    }
  }
}
</script>
<style scoped>
.table-company {
  cursor: pointer;
}
.table-title {
  padding-left: 0.6rem;
  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande',
    'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
  white-space: nowrap;
  line-height: 2rem;
  display: inline-block;
  margin-left: 2rem;
  border-left: 5px solid #5fb878;
}
</style>
